<?php

namespace JsonLowCode\UI;

use JsonLowCode\Schema;
use JsonLowCode\Traits\Props\HasBordered;
use JsonLowCode\Traits\Props\HasColor;
use JsonLowCode\Traits\Props\HasRound;
use JsonLowCode\Traits\Props\HasSize;

/**
 * 头像组件 NAvatar
 *  @method static Avatar make(string $src = "",mixed $children = null) Avatar组件
 */
class Avatar extends Schema
{

    use HasBordered, HasColor, HasRound, HasSize;

    protected string $componentName = "NAvatar";

    public function __construct(string $src = "",mixed $children = null)
    {
        parent::__construct();
        if ($src){
            $this->src($src);
        }
        $this->children($children);
    }


    /**
     * 头像的地址
     * @param string $src
     * @return $this
     */
    public function src(string $src): static
    {
        return $this->prop('src', $src);
    }

    /**
     * 头像加载失败时显示的图片的地址
     * @param string $src
     * @return $this
     */
    public function fallbackSrc(string $src): static
    {
        return $this->prop('fallbackSrc', $src);
    }

    /**
     * 是否在进入 intersection-observer-options 配置的视口之后再开始加载
     * @param bool|string $bool
     * @return $this
     */
    public function lazy(bool|string $bool = true): static
    {
        return $this->prop('lazy', $bool);
    }

    /**
     * 组件中 img 元素的属性
     * @param array|string $props
     * @return $this
     */
    public function imgProps(array|string $props): static
    {
        return $this->prop('imgProps', $props);
    }

    /**
     * lazy=true 时 intersection observer 观测的配置
     * @param array|string $options { root?: Element | Document | string | null, rootMargin?: string, threshold?: number | number[]; }
     * @return $this
     */
    public function options(array|string $options): static
    {
        return $this->prop('intersectionObserverOptions', $options);
    }

    /**
     * 头像的图片在容器内的的适应类型
     * @param string $size 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
     * @return $this
     */
    public function objectFit(string $size = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'): static
    {
        return $this->prop('objectFit',$size);
    }

    /**
     * 加载失败的渲染函数
     * ()=>{ return Vue.h(...) }
     * @param string $value () => VNodeChild
     * @return $this
     */
    public function renderFallback(string $value): static
    {
        return $this->jsFunction('renderFallback',$value);
    }

    /**
     * 占位的渲染函数
     * ()=>{ return Vue.h(...) }
     * @param string $value  () => VNodeChild
     * @return $this
     */
    public function renderPlaceholder(string $value): static
    {
        return $this->jsFunction('renderPlaceholder',$value);
    }

    /**
     * 头像的图片加载失败执行的回调
     * ()=>{ return Vue.h(...) }
     * @param string $value  () => VNodeChild
     * @return $this
     */
    public function onError(string $value): static
    {
        return $this->events('onError',$value);
    }

    /**
     * 加载失败的内容 slot fallback
     * @param string|array|Schema $value
     * @return $this
     */
    public function slotFallback(string|array|Schema $value): static
    {
        return $this->slot('fallback',$value);
    }

    /**
     * 图像没有完成加载时候的占位 slot placeholder
     * @param string|array|Schema $value
     * @return $this
     */
    public function slotPlaceholder(string|array|Schema $value): static
    {
        return $this->slot('placeholder',$value);
    }
}
